<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>07元素遍历操作</title>
		<!-- 元素遍历操作  针对DOM树中元素进行遍历{父子级关系}
		.children()  功能：获取匹配元素集合中每个元素的直接子元素
		.parent()    功能：获取匹配元素集合中每个元素的直接父元素
		
		.siblings()  功能：获取匹配元素集合中每个元素的所有兄弟元素
		
		.next()     功能：获取匹配元素集合中每个元素的下一个兄弟元素
		.prev()     功能：获取匹配元素集合中每个元素的上一个兄弟元素
		
		.each()     功能：遍历匹配元素的集合对每个元素执行指定的函数
		-->
		<style>
			.container{
				border: 1px solid red;
				margin: 10px;
				padding: 10px;
			}
			.box{
				background-color: #aaff7f;
				margin: 10px;
				padding: 10px;
			}
			button{
				margin: 5px;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
		</div>
		<button id="getcrBtn">获取直接子元素</button>
		<button id="getpBtn">获取直接父元素</button>
		<button id="getsBtn">获取兄弟元素</button>
		<button id="getnBtn">获取下一个元素</button>
		<button id="getprBtn">获取上一个元素</button>
		<button id="eachBtn">遍历元素</button>
		<script>
			// 1.点击获取直接子元素按钮   container父元素给.box元素加 10px边框
			$("#getcrBtn").click(function(){
				$(".container").children().css("border","10px solid #ffff7f");
			});
			//2.点击获取直接父元素按钮  container父元素加背景色#ff0
			$("#getpBtn").click(function(){
				$(".box").parent().css("background-color","#ffaaff")
			});
			//3.点击获取兄弟元素按钮  box3的兄弟元素  加背景色
			$("#getsBtn").click(function(){
				$("#box3").siblings().css("background-color","#00aaff")
			});
			//4.点击获取下一个兄弟元素按钮  box2的兄弟元素  加背景色
			$("#getnBtn").click(function(){
				$("#box2").next().css("background-color","#aa55ff")
			});
			//5.点击获取上一个兄弟元素按钮  box4的兄弟元素  圆 阴影 字体放大
			$("#getprBtn").click(function(){
				$("#box4").prev().css({"width":"100px",
				                       "height":"100px",
									   "border-radius":"50%",
									   "background":"#5500ff",
									   "text-shadow":"5px 5px 10px #ffaa7f",
									   "font-size":"2em",
									   "line-height":"100px",
									   "text-alige":"center"
									   });
			});
			//6.点击遍历元素按钮  实现动态输出box1
			// each(function(index,element){识别``传入下标${index}  })
			$("#eachBtn").click(function(){
				$(".box").each(function(i,e){  
					//i  下标  e 元素--形参
					$(e).text(`这是第${i+100}盒子`);
				});
			});
		</script>
	</body>
</html>